<template>
  <div class="screenshot-config">
    <div class="grid grid-cols-1 gap-4">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">截图类型</label>
          <el-select 
            v-model="localStep.screenshotType" 
            size="small"
            @change="updateStep"
          >
            <el-option label="整个页面" value="fullPage" />
            <el-option label="可视区域" value="viewport" />
            <el-option label="指定元素" value="element" />
          </el-select>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">图片格式</label>
          <el-select 
            v-model="localStep.format" 
            size="small"
            @change="updateStep"
          >
            <el-option label="PNG" value="png" />
            <el-option label="JPEG" value="jpeg" />
            <el-option label="WebP" value="webp" />
          </el-select>
        </div>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">保存路径</label>
        <el-input
          v-model="localStep.path"
          placeholder="screenshots/screenshot-{timestamp}.png"
          size="small"
          @change="updateStep"
        >
          <template #prepend>
            <el-icon><i-ep-folder /></el-icon>
          </template>
        </el-input>
        <div class="text-sm text-gray-600 mt-1">
          <el-icon class="mr-1"><i-ep-info-filled /></el-icon>
          支持变量: {timestamp}, {stepNumber}, {stepName}
        </div>
      </div>
      
      <div v-if="localStep.screenshotType === 'element'">
        <label class="block text-sm font-medium text-gray-700 mb-1">目标元素选择器</label>
        <el-input
          v-model="localStep.elementSelector"
          placeholder="CSS选择器或XPath"
          size="small"
          @change="updateStep"
        >
          <template #prepend>
            <el-icon><i-ep-aim /></el-icon>
          </template>
        </el-input>
      </div>
      
      <div class="border-t border-gray-200 pt-4">
        <h4 class="text-sm font-medium text-gray-700 mb-3">截图选项</h4>
        <div class="grid grid-cols-2 gap-3">
          <el-checkbox 
            v-model="localStep.omitBackground"
            @change="updateStep"
          >
            透明背景
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.animations"
            @change="updateStep"
          >
            包含动画
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.caret"
            @change="updateStep"
          >
            显示光标
          </el-checkbox>
          <el-checkbox 
            v-model="localStep.mask"
            @change="updateStep"
          >
            遮罩敏感信息
          </el-checkbox>
        </div>
      </div>
      
      <div class="grid grid-cols-3 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">图片质量 (1-100)</label>
          <el-input-number
            v-model="localStep.quality"
            :min="1"
            :max="100"
            size="small"
            class="w-full"
            :disabled="localStep.format === 'png'"
            @change="updateStep"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">截图前等待 (ms)</label>
          <el-input-number
            v-model="localStep.delay"
            :min="0"
            :step="100"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">超时时间 (ms)</label>
          <el-input-number
            v-model="localStep.timeout"
            :min="1000"
            :step="1000"
            size="small"
            class="w-full"
            @change="updateStep"
          />
        </div>
      </div>
      
      <div v-if="localStep.screenshotType !== 'element'" class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">自定义宽度 (px)</label>
          <el-input-number
            v-model="localStep.width"
            :min="100"
            :step="100"
            size="small"
            class="w-full"
            placeholder="默认使用页面宽度"
            @change="updateStep"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">自定义高度 (px)</label>
          <el-input-number
            v-model="localStep.height"
            :min="100"
            :step="100"
            size="small"
            class="w-full"
            placeholder="默认使用页面高度"
            @change="updateStep"
          />
        </div>
      </div>
      
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">截图描述</label>
        <el-input
          v-model="localStep.description"
          placeholder="描述这张截图的用途"
          size="small"
          @change="updateStep"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { 
  Folder as iEpFolder, 
  InfoFilled as iEpInfoFilled, 
  Aim as iEpAim 
} from '@element-plus/icons-vue'

const props = defineProps({
  step: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

const localStep = ref({
  screenshotType: 'fullPage',
  format: 'png',
  path: 'screenshots/screenshot-{timestamp}.png',
  elementSelector: '',
  omitBackground: false,
  animations: 'disabled',
  caret: 'hide',
  mask: false,
  quality: 80,
  delay: 0,
  timeout: 30000,
  width: null,
  height: null,
  description: '',
  ...props.step
})

watch(() => props.step, (newStep) => {
  localStep.value = {
    screenshotType: 'fullPage',
    format: 'png',
    path: 'screenshots/screenshot-{timestamp}.png',
    elementSelector: '',
    omitBackground: false,
    animations: 'disabled',
    caret: 'hide',
    mask: false,
    quality: 80,
    delay: 0,
    timeout: 30000,
    width: null,
    height: null,
    description: '',
    ...newStep
  }
}, { deep: true })

const updateStep = () => {
  emit('update', localStep.value)
}
</script>